<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>我的收益</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
    * {
    margin: 0;
    padding: 0;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    overflow-y: auto;
    padding: 15px;
  }

  .top {
    width: 100%;
    height: 25.9475vw;
    background: url(/mobile/img/profit-top.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
  }

  .total-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
  }

  .total-top-box {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .total-bottom-box {
    font-size: 30px;
    line-height: 35px;
    font-weight: bold;
  }

  .top-bar .van-cell {
    background: none;
  }

  .van-cell {
    align-items: center;
  }

  .exchange-btn {
    height: 30px;
  }
  .form-box {
    border-radius: 5px;
    margin-top: 20px;
    overflow: hidden;
  }
  .van-field__label {
    color: #fff;
  }
  .form-box .van-cell {
    color: #0D0E24;
    font-size: 14px;
    line-height: 30px;
    background-color: rgba(36, 22, 111, .3);
  }
  .form-box .van-cell::after {
    border-bottom-color: #1A1C68;
  }
  .pay-btn {
    width: 100%;
    box-sizing: border-box;
/*    position: fixed;*/
    margin-top: 30px;
    padding: 0 20px;
/*    bottom: 20px;*/
/*    left: 0;*/
    text-align: center;
  }
  .btn {
    width: 100%;
  }
  .icon {
    margin-right: 10px;
  }
  .check-row {
    font-size: 12px;
    margin: 10px 0;
    color: #fff;
    line-height: 12px;
  }
  .van-checkbox {
    display: inline-block;
    text-align: left;
  }
  .van-checkbox__icon {
    display: inline-block;
    vertical-align: middle;
    height: 12px;
    line-height: 12px;
  }
  .van-checkbox__icon .van-icon {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 0;
  }
  .van-icon-success:before {
    font-size: 10px;
  }
  .protal {
    font-size: 12px;
    color: #90E2DD;
  }
  .van-checkbox__label {
    font-size: 12px;
    color: #e7e7e7;
    vertical-align: middle;
  }
  .van-checkbox__icon--checked .van-icon {
    background: linear-gradient( 270deg, #9358F4 0%, #6E53F3 100%);
    border-color: #7153f3;
  }
  .van-field__control {
    color: #fff;
  }

  </style>
</head>

<body>
  <div id="app">
    <div class="top">
      <div class="total-box">
        <div class="total-top-box">可提现珍珠数</div>
        <div class="total-bottom-box">{{allowPearl}}</div>
      </div>
    </div>
    <div class="form-box">
      <van-form>
        <van-field readonly label="珍珠提现比例" input-align="right">
          <template #input>
            {{withdrawRatio}} 珍珠 = 1 元
          </template>
        </van-field>
        <van-field v-model="minPearl" readonly name="minPearl" label="最低提现" input-align="right">
          <template #extra>
            <span style="margin-left: 4px; color: #fff;">珍珠</span>
          </template>
        </van-field>
        <van-field v-model="withdrawCommission" readonly name="withdrawCommission" label="提现手续费" input-align="right">
          <template #extra>
            <span style="margin-left: 4px; color: #fff;">%</span>
          </template>
        </van-field>
        <van-field v-model="withdrawFixation" readonly name="withdrawFixation" label="固定提现费用" input-align="right">
          <template #extra>
            <span style="margin-left: 4px; color: #fff;">珍珠</span>
          </template>
        </van-field>
        <van-field v-model.number="pearl" type="digit" name="pearl" label="提现珍珠数" input-align="right" placeholder="请输入提现珍珠数" @blur="pearlBlur">
        </van-field>
        <van-field v-model="afterPearl" readonly name="afterPearl" label="可到账金额" input-align="right" placeholder="请输入提现珍珠数">
          <template #extra>
            <span style="margin-left: 4px; color: #fff;">元</span>
          </template>
        </van-field>
        <van-field v-model="account" readonly name="account" is-link label="提现账户" input-align="right" placeholder="请选择提现账户" @click="selectAccount">
          <template #input>
            <img class="icon" v-if="accountObj.type === 1" src="/mobile/img/icon_2.png" width="20px" height="20px" alt="">
            <img class="icon" v-if="accountObj.type === 3" src="/mobile/img/icon_3.png" width="20px" height="20px" alt="">
            {{account}}
          </template>
        </van-field>
        <van-field readonly is-link label="提现记录" input-align="right" @click="showCashRecord"></van-field>
      </van-form>
    </div>
    <div class="pay-btn">
      <div>每月{{startWithdrawDate}}-{{endWithdrawDate}}号可以申请提现</div>
      <div class="check-row">
        <van-checkbox class="check-box" v-model="checked" shape="square">我已认真阅读并同意<a @click.stop class="protal" href="../common/index.html?id=11">《提现规则》</a>和<a @click.stop="showProtal" class="protal">《自由职业者服务协议》</van-checkbox>
      </div>
      <van-button :disabled="btnDisabled" class="btn" round color="linear-gradient(to right, #7D29FE, #D591FE)" @click="cash">立即提现</van-button>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      token: '',
      allowPearl: '0',
      sms: '500',
      pearl: '',
      afterPearl: 0,
      account: '',
      accountObj: {},
      checked: false,
      withdrawRatio: '',
      withdrawCommission: '',
      withdrawFixation: '',
      minWithdrawMoney: '',
      startWithdrawDate: '',
      endWithdrawDate: '',
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }

      var data = parse(location.search)
      console.log(data)
      window.addEventListener('pageshow', () => {
        var account = sessionStorage.getItem('account')
        console.log(account)
        if (account) {
          var accountObj = JSON.parse(account)
          this.account = accountObj.account
          this.accountObj = accountObj
        }
        console.log(this.account)
      })
      
      if (data.token) {
        this.token = data.token
        this.getPearl()
        this.getData()
      }
    },
    computed: {
      minPearl () {
        return this.withdrawRatio * this.minWithdrawMoney
      },
      btnDisabled () {
        return !this.checked || Number(this.pearl) > Number(this.allowPearl)
      }
    },
    methods: {
      getPearl () {
        request.get('/api/pay/finance/user/getTotalWithdrawPearl').then(res => {
          if (res.code === 200) {
            this.allowPearl = res.data.allowPearl
          }
        })
      },
      getData() {
        request.get('/api/pay/finance/systemPar/getWithdrawPar').then(res => {
          console.log(res)
          this.withdrawRatio = Number(res.data.withdrawRatio)
          this.withdrawCommission = Number(res.data.withdrawCommission)
          this.withdrawFixation = Number(res.data.withdrawFixation)
          this.minWithdrawMoney = Number(res.data.minWithdrawMoney)
          this.startWithdrawDate = Number(res.data.startWithdrawDate)
          this.endWithdrawDate = Number(res.data.endWithdrawDate)
        })
      },
      pearlBlur () {
        if (Number(this.pearl) > Number(this.allowPearl)) {
          this.$toast('超过可提现珍珠数，请重新输入')
          this.pearl = null
          this.afterPearl = null
          return
        }
        if (Number(this.pearl) < this.minPearl) {
          this.pearl = this.minPearl
        }

        // 截取小数点后2位，且保留两位小数
        // 先扣%再扣固定费用 ((提现数*(100-百分比费用)/100 - 固定费用) / 转换率).(金额截取2位).toFixed(2)
        this.afterPearl = Number((((this.pearl * (100 - this.withdrawCommission) / 100) - this.withdrawFixation)  / this.withdrawRatio).toString().match(/^\d+(?:.\d{0,2})?/)[0]).toFixed(2)
      },
      selectAccount () {
        location.href = './account.html?token=' + this.token
      },
      showCashRecord () {
        location.href = './cash.html?token=' + this.token
      },
      cash () {
        if (this.pearl === '') {
          this.$toast('请输入提现珍珠数')
          return
        }
        if (!this.accountObj.id) {
          this.$toast('请选择提现账户')
          return
        }
        request.post('/api/pay/finance/withdraw', {
          cashAccountId: this.accountObj.id,
          pearl: this.pearl
        }).then(res => {
          console.log(res)
          this.$toast('提现申请成功,请等待平台审核！')
          this.getPearl()
          this.pearl = null
          this.afterPearl = 0
        })
      },
      showProtal () {
        request.get('/api/pay/sign/status').then(res => {
          console.log(res)
          location.href = res.data.fileUrl
        })
      }
    }
  })
  </script>
</body>

</html>